<!--
 * @LastEditors: yuSeen
 * @LastEditTime: 2022-01-11 12:38:34
-->
<template>
    <div class="login drag">
        <div class="close flex-c">
            <SvgIcon
                name="close-icon"
                :size="18"
                hover
                class="closeIcon no-drag"
                @click="closeLoginWindow"
            ></SvgIcon>
        </div>
        <div class="title flex-c-c no-drag">扫码登录</div>
        <div class="content no-drag">
            <div class="tipImg">
                <img
                    src="https://s2.music.126.net/style/web2/img/qr_guide.png?a367711820ecdf97f0430e781112d15c"
                />
            </div>
            <div class="qrCode flex-col-b-c">
                <img :src="qrImgSrc" />
                <div class="mt-4">
                    使用
                    <a
                        href="https://music.163.com/#/download"
                        target="_blank"
                        @click="toApp"
                    >网易云音乐APP</a>扫码登陆
                </div>
            </div>
        </div>
        <div class="more flex-c-c">选择其他登陆模式&gt;</div>
    </div>
</template>

<script lang='ts' setup>
import config from '@/config/config'
import SvgIcon from "@/components/svgIcon/svgIcon.vue";
import { getLoginQrcode, getLoginQrcodeStatus } from '@/service/api/user/login'
import { qrcodeStatus } from '@/service/api/user/types'
import { onMounted, ref } from 'vue';
import { useUserStore } from '@/store/user'
import { getSimpleCookie } from '@/utils/util'
import { message } from 'ant-design-vue';

const emits = defineEmits(['close'])
const userStore = useUserStore()

//@ts-ignore
const ipcRenderer = window.ipcRenderer;

// 二维码key
let qrKey = ''
// 二维码地址
const qrImgSrc = ref('')
// 轮询定时器
let getStatusInter: NodeJS.Timer;

// 获取登录二维码
const getQrcode = async () => {
    const { data: { qrimg, key } } = await getLoginQrcode()
    qrImgSrc.value = qrimg
    qrKey = key
}

onMounted(async () => {
    await getQrcode()
    getStatus()
})

// 轮询扫码登录状态
const getStatus = () => {
    getStatusInter = setInterval(async () => {
        if (qrKey !== '') {
            // @ts-ignore
            const { code, cookie } = await getLoginQrcodeStatus(qrKey)
            switch (code) {
                case qrcodeStatus.已过期:
                    await getQrcode()
                    clearInterval(getStatusInter)
                    getStatus()
                    break;
                case qrcodeStatus.等待扫码:
                    break;
                case qrcodeStatus.待确认:
                    break;
                case qrcodeStatus.授权登录成功:
                    userStore.setToken(getSimpleCookie(cookie))
                    userStore.updateUserInfo()
                    clearInterval(getStatusInter)
                    message.success('登陆成功')
                    closeLoginWindow()
                    break;
            }
        }
    }, 3000)
}


// 跳转外部链接
const toApp = (e: any) => {
    if (config.isElectron) {
        e.preventDefault()
        const href = e.target.href
        ipcRenderer.send('openUrl', href)
    }
}

// 关闭登录窗口
const closeLoginWindow = () => {
    if (config.isElectron) {
        ipcRenderer.send('close-login-window')
        clearInterval(getStatusInter)
    } else {
        emits('close')
        clearInterval(getStatusInter)
    }
}
</script>

<style scoped lang='scss'>
.login {
    width: 100%;
    height: 100%;
    color: $common-text-color;
    background-color: $main-bg-color;
    .close {
        width: 100%;
        justify-content: flex-end;
        padding-right: 20px;
        height: 50px;
        .closeIcon {
            fill: $icon-color !important;
        }
    }
    .title {
        margin-top: 20px;
        font-size: 28px;
    }

    .content {
        @apply relative flex justify-center items-center w-full;
        height: 300px;
        margin-top: 20px;
        &:hover {
            .qrCode {
                transform: translateX(80px);
                width: 40%;
            }
            .tipImg {
                opacity: 1;
                transform: translateX(-80px);
            }
        }

        .qrCode {
            position: absolute;
            width: 50%;
            text-align: center;
            transition: all 0.3s linear;
            img {
                width: 100%;
            }
        }
        .tipImg {
            position: absolute;
            opacity: 0;
            transition: all 0.3s linear;
            width: 40%;
        }
    }
    .more {
        margin-top: 20px;
        color: $sub-text-color;
    }
}
</style>